<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        #editContainer {
            background-size: 320px 504px;
            display: block;
            position: relative;
            width: 320px;
            height: 504px;
            border: solid 1px #000;
        }
    </style>

    <link rel="stylesheet" href="demo/css/poster.css" />
    <link rel="stylesheet" href="demo/css/jQuery.ContextMenu.css" />

    <script type="text/javascript" src="demo/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="demo/js/jQuery.ContextMenu.js"></script>
    <script type="text/javascript" src="demo/js/designer.js"></script>
    <script type="text/javascript" src="demo/js/poster.js"></script>
</head>
<body>
<!--被编辑的主区域；这个盒子应该是固定大小的，或者你可以通过用户上传的背景图片来确定大小-->
<div id="editContainer">
    <!--
        如下三个盒子是可以编辑大小的
        type属性，取值img,name,qr；分别代表图片，文字，二维码
            当type=qr时，缩放是按照比例进行的
        index属性，自己编辑，不要重复

        style中的位置，是为了，区分开位置的
    -->
    <div class="drag" type="img" index="1" style="top:100px;left:10px;">
        <img src="demo/img/default.jpg" alt="">
    </div>
    <div class="drag" type="name" index="2" style="top:220px;left:10px;">
        昵称
    </div>
    <div class="drag" type="qr" index="3" style="top:100px;right:10px;width:120px;height:120px;">
        <img src="demo/img/qr.png" alt="">
    </div>
</div>
{$vo.first_time_follow_msg}
<input type="button" class="newDrag" data-type="name" value="名称">
<input type="button" class="newDrag" data-type="qr" value="二维码">
<input type="button" class="newDrag" data-type="img" value="头像">
<input type="hidden" name="imgUrl" value="">


<form id="formImg" action="/trends/index.php?m=WeChat&a=uploadImg" method="post" target="hidden_frame" enctype="multipart/form-data">
    <div class="fromtrs">
        <label>*活动海报：</label>
        <input id="AidImg" class="sstp" type="file" name="AidImg" onchange="uploadImg()"/>
        <div class="sjjt" style="display:none;" id="imgError">
            <div class="bzsj_left"></div>活动海报不可为空</div>
    </div>
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>





<script>
    $(function () {
        function addDragEvent(obj) {
            var litTrigger = '<div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div>';
            $(obj).append(litTrigger);
            dragEvent($(obj));
        }

        //为可编辑的盒子绑定 resize和drag
        $('.drag').each(function () {
            addDragEvent(this);
        });

        //增加一个
        $(".newDrag").click(function () {
            var type = $(this).attr('data-type');
            console.log(type);
            var newDiv = $("<div></div>").attr({"class": "drag", "type": type});
            if (type == 'img') {
                newDiv.append($("<img>").attr({"src": "demo/img/default.jpg"}));
            }
            if (type == 'name') {
                newDiv.append("昵称");
            }
            if (type == 'qr') {
                newDiv.append($("<img>").attr({"src": "demo/img/qr.png"}));
            }
            $("#editContainer").append(newDiv);
            newDiv.attr("index", newDiv.index() + 1);
            addDragEvent(newDiv);
        });

    });
</script>
<script>
    $("#inputFile").on("change", function () {
        // Get a reference to the fileList
        var files = !!this.files ? this.files : [];

        // If no files were selected, or no FileReader support, return
        if (!files.length || !window.FileReader) return;

        // Only proceed if the selected file is an image
        if (/^image/.test(files[0].type)) {

            // Create a new instance of the FileReader
            var reader = new FileReader();

            // Read the local file as a DataURL
            reader.readAsDataURL(files[0]);

            // When loaded, set image data as background of div
            reader.onloadend = function () {

                $("#editContainer").css("background-image", "url(" + this.result + ") ");

            }

        }

    });
    $('#uploadForm').submit(function () {
        var form = new FormData($("#uploadForm"));
        $.ajax({
            url: "http://www.zaijiahome.com/trends/index.php?m=WeChat&a=test1",
            type: "post",
            data: form,
//            processData: false,
//            contentType: false,
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                alert("错误！！");
            }
        });
    });

    function uploadImg()
    {
        var names=$("#AidImg").val().split(".");
        if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")
        {
            $("#imgError").html("<div class='bzsj_left'></div>"+"海报必须为gif,jpg,png格式");
            $("#imgError").show();
            return;
        }
        $("#formImg").submit();
    }

    function callback(message,success)
    {
        if(success==false)
        {
            $("#imgError").html("<div class='bzsj_left'></div>"+message);
            $("#imgError").show();
        }
        else{
            $("#imgError").hide();
            var paths=message.split("/");
//            $("#img").attr("src",message);
            $("input[name='imgUrl']").val(message);
            $("#editContainer").css("background-image", "url(" + message + ") ");
        }
    }
</script>



</body>
</html>
